<template>
  <div class="structuration-detail">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">结构化</x-header>
    </div>
    <div class="dy-body">
      <scroller lock-x height="100%" ref="scroller">
        <div>
          <div class="productDetailBox">
            <!-- <h3>{{financialData.name}}</h3> -->
            <div><p class="benefit caption">99,999,333.00</p></div>
            <div><p class="benefit">总资产（元）</p></div>
          </div>
          <div class="flow">
            <h3>结构化周期</h3>
            <flow>
              <flow-state is-done>
                <div slot="title"><h4>起售</h4><p>05.13</p></div>
              </flow-state>
              <flow-line is-done :line-span="15"></flow-line>
              <flow-state is-done>
                <div slot="title"><h4>截止</h4><p>05.18</p></div>
              </flow-state>
              <flow-line is-done :line-span="30"></flow-line>
              <flow-state is-done>
                <div slot="title"><h4>登记日</h4><p>05.18</p></div>
              </flow-state>
              <flow-line tip-direction="bottom" :line-span="45" :process-span="60"></flow-line>
              <flow-state title="到期">
                <div slot="title"><h4>到期</h4><p>05.20</p></div>
              </flow-state>
            </flow>
            <div class="progress">
              <h4>结构化进行中，剩余到期日：80天</h4>
              <span>*到期时间如果是节假日，则在节假日后的第一个工作日到期</span>
            </div>
          </div>
          <div class="tip-msg">
            <h3>交易规则</h3>
            <p>购买时间：00：00-24：00</p>
            <p>期限内不可赎回</p>
          </div>
          <div class="bottom-contant">
            <group gutter='0'>
              <cell :title="('产品说明')" @click.native="showPopupPicker1 = true" :value="value1[0]" is-link></cell>
              <cell :title="('公告及风险提示')" @click.native="showPopupPicker2 = true" :value="value2[0]" is-link></cell>
              <popup-picker :show.sync="showPopupPicker1" :show-cell="false" :data="list1" v-model="value1"></popup-picker>
              <popup-picker :show.sync="showPopupPicker2" :show-cell="false" :data="list2" v-model="value2"></popup-picker>
            </group>
          </div>
        </div>
      </scroller>
    </div>
    <div class="dy-footer">
      <div class="buy-button"><x-button type="primary" @click.native="buyClick()">购买</x-button></div>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      num: '',
      Title: '',
      prdInfo: {},
      value1: ['请选择'],
      list1: [['请选择', '上海市浦东新区', '北京市朝阳区', '北京市大兴区']],
      value2: ['请选择'],
      list2: [['请选择', '企业经理', '技术人员', '服务人员', '其他']],
      showPopupPicker1: false,
      showPopupPicker2: false,
      ischecked: 1,
      dataList1: ['1', '5', '10', '15', '20', '25', '30'],
      dataList2: ['1-1', '1-10', '1-20', '1-30', '2-10', '2-20', '2-30', '3-10', '3-20', '3-30'],
      dataList3: ['18-1', '18-2', '18-3', '18-4', '18-5', '18-6', '18-7', '18-8', '18-9', '18-10', '18-11', '18-12'],
      echartOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '5', '10', '15', '20', '25', '30']
        },
        yAxis: {
          type: 'value'
        },
        legend: {left: 0, top: 0, bottom: 0, right: 0},
        grid: {left: '30', top: '40rem', bottom: '30', right: 0},
        color: ['#FF6633'],
        series: [
          {
            type: 'line',
            data: [3, 1, 0, 4, 6, 2, 1, 4, 4, 5, 5],
            smooth: true
          }
        ]
      }
    }
  },
  computed: {
    getStructurationInfo () {
      return this.$store.getters.getStructurationInfo
    }
  },
  methods: {
    buyClick () {
      this.$router.push({name: 'StructurationBuy', query: {prdName: this.Title, rate: this.prdInfo.rate}})
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  mounted () {
    let num = this.$route.query.num
    this.prdInfo = this.getStructurationInfo[num]
    // this.Title = this.prdInfo.prdName
  }
}
</script>

<style lang="less">
  .structuration-detail{
    .dy-body{
      padding-bottom: 1rem;
      .productDetailBox {
        top: .88rem;
        left: 0;
        width: 100%;
        height: 1.64rem;
        padding:.2rem;
        background-color: #3d477b;
        color: #fff;
        h3 {
          padding: .3rem .3rem 0;
          height: .6rem;
          font-size: .28rem;
        }
        .benefit{
          text-align: center;
        }
        .caption{
          font-size: .5rem;
        }
      }
      .flow{
        padding: .3rem;
        .weui-wepay-flow{
          padding-top: 0.5rem;
          .weui-wepay-flow__title-bottom{
            font-size:.2rem;
          }
        }
        .progress{
          padding-left: .5rem;
          padding-top: .1rem;
          h4{
            padding-left: .2rem;
            font-size: .26rem;
          }
          span{
            font-size: .18rem;
          }
        }
      }
      .tip-msg{
        padding: 0.2rem;
        background: #fff;
        >p{
          font-size: 0.24rem;
        }
      }
      .bottom-contant{
        padding-bottom: 0.6rem;
      }
    }
    .dy-footer{
      position: absolute;
      left: 0;
      bottom: 0;
      overflow: hidden;
      width: 100%;
      .buy-button{
        padding: 0.2rem 0.4rem 0.2rem;
        border-top: .01rem solid #d9d9d9;
        background-color: #fff;
        .weui-btn:after{
          /*border: none;*/
        }
      }
    }
  }
</style>
